<template  v-if="isfal">
  <div class="page5">
    <div class="top">
      <img src="../assets/btn.png" alt="" />
    </div>
    <div class="con">
      <div>查看利益演示表</div>
      <img src="../assets/icon2.png" alt="" />
    </div>
    <div class="con">
      <div>查看完整计划书</div>
      <img src="../assets/icon2.png" alt="" />
    </div>
    <div class="footer">
      本计划由《太平福禄20两全保险》、《太平附加福禄20提前给付重大疾病保险》、《太平超e保2021医疗保险》和《太平医安心医疗保险》构成，由太平人寿保险有限公司承保。本资料仅供了解该产品计划使用，具体应以条款与保险合同为准。
    </div>
  </div>
</template>
<script>
export default {
  methods: {},
  computed: {
    isfal() {
      return this.num == 4;
    },
  },
};
</script>

<style lang="less" scoped>
.page5 {
  width: 100%;
  height: 100%;
  background: #f2ebe3;
  .top {
    width: 100%;
    height: 100px;
    background: url(../assets/benner.png) no-repeat 50%;
    background-size: cover;
    position: relative;
    img {
      position: absolute;
      right: 15px;
      top: 10px;
      width: 30px;
      height: 30px;
      z-index: 1;
      animation: run 4s linear 0s infinite;
    }
    h2 {
      position: absolute;
      left: 15px;
      bottom: 5px;
      font-size: 20px;
    }
    @keyframes run {
      from {
        -webkit-transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(360deg);
      }
    }
  }
  .footer {
    width: 95%;
    position: fixed;
    bottom: 30px;
    left: 0;
    color: #999;
    font-size: 12px;
    z-index: 999;
    margin-left: 10px;
  }
  .con {
    width: 95%;
    height: 50px;
    background: #fff;
    margin: 0 auto;
    margin-top: 5px;
    border-radius: 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #926235;
    font-weight: bold;
    div {
      width: 80%;
    }
    img {
      width: 5%;
    }
  }
}
</style>